<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/header.css">
	<link rel="stylesheet" type="text/css" href="css/bottom.css">
	<link rel="stylesheet" type="text/css" href="css/detail.css">
	<link rel="stylesheet" type="text/css" href="css/Products.css">
	<title>产品介绍·</title>
</head>
<body>
	<header class='header'>
		<div class="logo"><img src="img/logo.gif"></div>
		<div class="asideBox">
			<div class='searchBox'>
				<div class="language"><span>简体中文</span><span>English</span></div>
				<search ><input type="text" class="search"><i class="icon-search"></i></search>
			</div>
			<div class="title">
				<a href="index.html" class=" btn-hover">首页</a>
				<a href="Detail.html" class=" btn-hover">公司简介</a>
				<a href="Products.html" class="on btn-hover">产品介绍</a>
				<a href="News.html" class="btn-hover">新闻动态</a>
				<a href="Recruit.html" class="btn-hover">人才招聘</a>
			</div>
		</div>
	</header>
	<section class="navBox"><img src="img/qq000004.png"></section>
	<section class="pageBox">
		<div class="tipBox">
			<div class='content'>
				<i ><img src="img/cp_05.png"></i>
				<span>当前位置</span>:
				<span>首页</span>>
				<span id='tips'>产品介绍</span>
			</div>
		</div>
		<div class='mainBox'>
			<div class="title" id='title'>
				<a class='on btn-hover' dataset='1'>流行元素</a>
				<a class='btn-hover' dataset='2'>国漫资讯</a>
				<a class='btn-hover' dataset='3'>奖品展示</a>
				<a class='btn-hover' dataset='4'>动漫周边</a>
			</div>
			<div class="contentBox" id="list">
				<div class="list1 list" dataPage='1'>
					<!-- Swiper -->
				    <div class="swiper-container carousel1">
				        <div class="swiper-wrapper">
				            <div class="swiper-slide"><img src="img/Q1.png"></div>
				            <div class="swiper-slide"><img src="img/Q2.png"></div>
				            <div class="swiper-slide"><img src="img/Q3.png"></div>
				            <div class="swiper-slide"><img src="img/Q4.png"></div>
				            <div class="swiper-slide"><img src="img/Q5.png"></div>
				            <div class="swiper-slide"><img src="img/Q6.png"></div>
				            <div class="swiper-slide"><img src="img/Q7.png"></div>
				            <div class="swiper-slide"><img src="img/Q8.png"></div>
				            <div class="swiper-slide"><img src="img/Q9.png"></div>
				            <div class="swiper-slide"><img src="img/q10.png"></div>
				        </div>
				        <!-- Add Pagination -->
				        <div class="swiper-pagination"></div>
				                <!-- Add Arrows -->
				        <div class="swiper-button-next"></div>
				        <div class="swiper-button-prev"></div>
				    </div>
					<div class='imgBox'><img class='animate' src="img/728da9773912b31b5215dfff8618367adbb4e1ef.jpg"></div>
					<h3>新风尚:</h3>
					<p>日本的动画题材多样画面精彩音乐水准高有文化内涵日本动画的流行也就在情理之中了但令我们不得不深思的是中国的动画
						发展历史不比日本的晚而且曾经取得过很辉煌的成绩但为什么现在却在动画的蓝天下没有什么站得住脚的地方呢希望对日本
						动画流行的原因探讨能够给中国动画的发展带来一些借鉴意义</p>
				</div>
				<div class="list2 list" dataPage='2'>
					<div class='imgBox'><img class='animate' src="img/das.png"></div>
					<h3>国漫崛起:</h3>
					<p>这几年喊着逆输出到日本口号的国产动画不少，但是真正做到成功逆输出的可以说几乎没有，即使是打出了中日合作之类
						的旗号，但是内容本身没有吸引力难以在日本市场立足，而去年掀起了国产动画口碑和人气高潮的《西游记之大圣归来》
						凭借在中国国内的高票房和高口碑也吸引了日本人的注意，今天通耀宣布将在 3 月 19 日日本一家电影院中上映一场
						《西游记之大圣归来》，同时《西游记大圣归来》也获得今年东京国际动画节竞赛单元长篇作品提名，大圣归来正式在
						日本上映预定在 2017 年春季。</p>
				</div>
				<div class="list3 list" dataPage='3'>
					<div class='imgBox'><img src="img/news2.jpg"></div>
				</div>
				<div class="list4 list" dataPage='4'>
					<!-- Swiper -->
				    <div class="swiper-container carousel2">
				        <div class="swiper-wrapper">
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/mianma.jpg">
						            <figcaption>
						                <h2>面玛</h2>
						                <p>预售中</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/jianhao.jpg">
						            <figcaption>
						                <h2>剑豪</h2>
						                <p>预售中</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/shatan.jpg">
						            <figcaption>
						                <h2>Alla</h2>
						                <p>预售中</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/lufei.jpg">
						            <figcaption>
						                <h2>路飞</h2>
						                <p>预售中</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				        </div>
				        <!-- Add Pagination -->
				        <div class="swiper-pagination"></div>
				                <!-- Add Arrows -->
				        <div class="swiper-button-next"></div>
				        <div class="swiper-button-prev"></div>
				    </div>
				</div>
			</div>
		</div>
	</section>
	<footer class="footer-bg">
		<div class='footer'>
			<div class="asideBox-l asideBox">
				<p>友情链接:蓝猫卡通传媒</p>
				<p>服务热线:0731-8008208820(时间:10:00~17:00)</p>
				<p>公司地址：湖南省长沙市万达广场B栋</p>
			</div>
			<div class="asideBox-r asideBox">
				<div class="imgBox"><img class='animate' src="img/qrcode.jpg"></div>
				<div class="contentBox">
					<p>微信号</p>
					<p>扫描关注</p>
				</div>
			</div>
		</div>
	</footer>
	<div class="nav-bottom">
		Copyright 2003-2007, 版权所有 TAOBAO.COM
	</div>
	
</body>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!-- Swiper JS -->
<!-- <script type="text/javascript" src="js/swiper.jquery.min.js"></script> -->
<script src="/js/swiper.min.js"></script>
<script type="text/javascript">
		$(function(){
			$('#title a').on('click',function(){ 
				var that=this;
				$('#title a').each(function(){
					if($('#title a').hasClass('on')){
						$(this).removeClass('on');
					}
				})
				$('#list .list').each(function(){
					$(this).hide();
					if($(that).attr('dataset')==$(this).attr('dataPage')){
						$(this).show();
					}

				})
				$('#tips').html($(this).html());
				$(this).addClass('on');
			})
		})
		var swiper1 = new Swiper('.list1 .swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        paginationClickable: true,
	        spaceBetween: 30,
	        centeredSlides: true,
	        autoplay: 2500,
	        autoplayDisableOnInteraction: false,
	        slidesPerView: 4,
        	centeredSlides: true,
        	loop:true,
        	pagination : '.swiper-pagination',
		    paginationClickable: true,
		    longSwipesRatio: 0.3,
		    touchRatio:1,
		    observer:true,//修改swiper自己或子元素时，自动初始化swiper
		    observeParents:true,//修改swiper的父元素时，自动初始化swiper
	    });
	    var swiper2 = new Swiper('.list4 .swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        paginationClickable: true,
	        spaceBetween: 30,
	        centeredSlides: true,
	        autoplay: 2500,
	        autoplayDisableOnInteraction: false,
	        slidesPerView: 4,
        	centeredSlides: true,
        	loop:true,
        	pagination : '.swiper-pagination',
		    paginationClickable: true,
		    longSwipesRatio: 0.3,
		    touchRatio:1,
		    observer:true,//修改swiper自己或子元素时，自动初始化swiper
		    observeParents:true,//修改swiper的父元素时，自动初始化swiper
	    });
</script>
</html>